// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 挂载vuex
import store from "./vuex/store";
// 支持Markdown的富文本
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// 引入字体
import '@/assets/font/index.css';

// 引入echarts
// import echarts from "echarts";

export default {
  // 组件名称
  name: 'App'
}
Vue.config.productionTip = false
// 解决 在弹出el-dialog时，会发现弹出框弹出时，页面会抖动，滚动条被遮罩层覆盖直接没有滚动条了，导致页面缩小了几个像素点（滚动条的宽度）；体验感不好，会影响到
// 页面的布局，且页面有的fixed定位的内容也会随着遮罩层的出现移动几个像素点；
ElementUI.Dialog.props.lockScroll.default = false;

// 挂载 echarts，引入 let myChart = this.$echarts.init(DOM)
// Vue.prototype.$echarts = echarts;

// 使用ElementUI组件
Vue.use(ElementUI);
// 挂载vuex到原型链上，否则直接使用 this.$store.state.navigationList 会报undefined,这可能和vue版本有关系
Vue.prototype.$store= store;
// 挂载支持Markdown的富文本
Vue.use(mavonEditor)

new Vue({
  el: '#app',
  // 挂载路由
  router,
  // 挂载vuex
  store,
  components: { App },
  template: '<App/>',
  created(){
    // 支持页面使用rem，这样用rem也可以正常显示
    // 实例创建完成后被立即调用rem换算方法,解决内容闪现问题
    setRemPc();
    window.addEventListener('resize', setRemPc);//浏览器窗口大小改变时调用rem换算方法
  },
})


/**
 * rem计算
 */
function setRemPc() {
  // let whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
  let whdef = 60/1920;// 表示1920的设计图,使用100PX的默认值
  let bodyWidth = document.body.clientWidth;// 当前窗口的宽度
  let rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
  document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}

// Vue.prototype.http = http

